<template>
  <div class="screenshot">
    <div class="top">
      <div style="width: 1190px;margin: 0 auto;position: relative;">
        <div class="topmain">
          使用方法：鼠标点击对应的数字或标题即可进入编辑，鼠标移出点击空白位置编辑完成，编辑完成后即可截取相应的截图
        </div>
        <div class="top_right1">
          1/1
        </div>
        <div class="top_right2">
          共1条
        </div>
      </div>
    </div>
    <div class="header">
      <a-space>
        <a-input class="br4" placeholder="商品ID" v-model="itemId"/>
        <a-input class="br4" placeholder="服务费率 2% = 0.02" v-model="rate"/>
        <a-input class="br4" placeholder="销量" v-model="num"/>
        <a-button class="br4" type="primary" @click="getdata">
          确 定
        </a-button>
      </a-space>
    </div>
    <div class="main">
      <div class="card">
        <div class="title">
          <span class="t1">我发起的招商活动</span>
          <span class="t2">></span>
          <span class="t3" style="margin-left: 4px;">双12年终盛典主力专场，预报从速scxWL32 <a-icon
            type="down"
            style="font-size: 11px;line-height: 30px;"/></span>
        </div>
        <div class="infobox">
          <div class="info_top">
            <h3 class="h3">
              <span class="tgz">● 推广中</span>
              <span class="title_text">
                双12年终盛典主力专场，预报从速scxWL32
              </span>
              <span class="goodsinfo">
                您共有<span class="num" contenteditable>28</span>个报名商品，其中<span
                  class="num"
                  contenteditable>0</span>个待审核商品，<span
                    class="num"
                    contenteditable>28</span>个审核通过商品。
              </span>
              <span class="copyright">
                <span class="pubfont icon-fuzhi1" style="font-size:18px;vertical-align: -3px;"></span>
                复制商家报名链接
              </span>
            </h3>
          </div>
          <div class="timebox">
            <div class="time">
              <span class="active">
                <span style="color: #999;">活动时间</span><br/>
                <span class="time_value">
                  <span contenteditable class="sp">2019-12-10</span>
                  <span class="ml5 mr5 color-l">至</span>
                  <span contenteditable class="sp"> 2020-01-13</span>
                </span>
              </span>
              <span class="endtime">
                <span class="color-l">
                  最晚审核时间
                  <span class="ml5 pubfont icon-shuoming f14" title="请于各商品排期时间前完成审核，否则自动拒绝"></span>
                </span>
                <div class="sp">
                  --
                </div>
              </span>
            </div>
            <div class="export">
              <div class="" style="display: flex;">
                <div class="exleft btn">
                  导出商品
                  <div class="detail">
                    <a class="btn btn-small mb5 w140" style="color: #333;">导出报名商品</a>
                    <a class="btn btn-small mt5 w140" style="display: block;color: #333;">导出Excel推广</a>
                  </div>
                </div>
                <div class="exright btn">员工审核</div>
              </div>
            </div>
          </div>
          <div class="summary">
            <div class="">
              <h5 class="h5 f16">
                效果数据汇总 <span class="f12 color-l ml20">截止时间：<span contenteditable>2019-12-12</span></span>
              </h5>
              <div class="s_detail">
                <dl>
                  <dt>
                    <span class="sd_tile">推广商品数</span> <span class="pubfont icon-shuoming f14 ml5"></span>
                  </dt>
                  <dd>
                    <span class="number mr5">
                      <span class="integer" contenteditable>{{ goodslist.length>0 ?goodslist.length: 28 }}</span>
                    </span>
                  </dd>
                </dl>
                <dl>
                  <dt>
                    <span class="sd_tile">引流UV</span> <span class="pubfont icon-shuoming f14 ml5"></span>
                  </dt>
                  <dd>
                    <span class="number mr5">
                      <span class="integer" contenteditable>343</span>
                    </span>
                  </dd>
                </dl>
                <dl>
                  <dt>
                    <span class="sd_tile">付款金额</span> <span class="pubfont icon-shuoming f14 ml5"></span>
                  </dt>
                  <dd>
                    <span class="number mr5">
                      <span class="integer" contenteditable>1,475</span>
                      <span class="pointer">.</span>
                      <span class="decimal" contenteditable>40</span>
                      <span class="yuan">元</span>
                    </span>
                  </dd>
                </dl>
                <dl style="margin-right: 50px">
                  <dt>
                    <span class="sd_tile">付款笔数</span> <span class="pubfont icon-shuoming f14 ml5"></span>
                  </dt>
                  <dd>
                    <span class="number mr5">
                      <span class="integer" contenteditable>66</span>
                    </span>
                  </dd>
                </dl>
                <dl>
                  <dt>
                    <span class="sd_tile">预估付款服务费</span> <span class="pubfont icon-shuoming f14 ml5"></span>
                  </dt>
                  <dd>
                    <span class="number mr5">
                      <span class="integer" contenteditable>73</span>
                      <span class="pointer">.</span>
                      <span class="decimal" contenteditable>76</span>
                      <span class="yuan">元</span>
                    </span>
                  </dd>
                </dl>
                <dl>
                  <dt>
                    <span class="sd_tile">结算金额</span> <span class="pubfont icon-shuoming f14 ml5"></span>
                  </dt>
                  <dd>
                    <span class="number mr5">
                      <span class="integer" contenteditable>0</span>
                      <span class="pointer">.</span>
                      <span class="decimal" contenteditable>00</span>
                      <span class="yuan">元</span>
                    </span>
                  </dd>
                </dl>
                <dl>
                  <dt>
                    <span class="sd_tile">结算笔数</span> <span class="pubfont icon-shuoming f14 ml5"></span>
                  </dt>
                  <dd>
                    <span class="number mr5">
                      <span class="integer" contenteditable>0</span>
                    </span>
                  </dd>
                </dl>
                <dl>
                  <dt>
                    <span class="sd_tile">预估结算服务费</span> <span class="pubfont icon-shuoming f14 ml5"></span>
                  </dt>
                  <dd>
                    <span class="number mr5">
                      <span class="integer" contenteditable>0</span>
                      <span class="pointer">.</span>
                      <span class="decimal" contenteditable>00</span>
                      <span class="yuan">元</span>
                    </span>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
          <div class="navs" style="height: 61px">
            <ul class="f18" style="position: absolute;top: 1px;left: 0">
              <li class="nav fl mt10 tc">
                <a class="f16">活动信息</a>
              </li>
              <li class="nav fl mt10 tc">
                <a class="f16">报名商品</a>
              </li>
              <li class="nav fl mt10 tc selected">
                <a class="f16">推广效果</a>
              </li>
            </ul>
          </div>
          <div class="tablebox" ref="father">
            <table class="table" ref="son" >
              <thead style="white-space:nowrap">
                <tr style="height: 62px;">
                  <th>
                    <div style="width: 333px;">
                      商品信息
                    </div>
                  </th>
                  <th>
                    <div style="width: 106px;">
                      引流UV <span class="ml5 pubfont f14 icon-paixu1"></span> <span
                        class="ml5 pubfont icon-shuoming f14"></span>
                    </div>
                  </th>
                  <th>
                    <div style="width: 116px;">
                      券使用量 <span class="ml5 pubfont f14 icon-paixu1"></span> <span
                        class="ml5 pubfont icon-shuoming f14"></span>
                    </div>
                  </th>
                  <th>
                    <div style="width: 118px;">
                      付款笔数 <span class="ml5 pubfont f14 icon-paixu1"></span> <span
                        class="ml5 pubfont icon-shuoming f14"></span>
                    </div>
                  </th>
                  <th>
                    <div style="width: 119px;">
                      付款金额 <span class="ml5 pubfont f14 icon-paixu1"></span> <span
                        class="ml5 pubfont icon-shuoming f14"></span>
                    </div>
                  </th>
                  <th>
                    <div style="width: 121px;">
                      服务费率 <span class="ml5 pubfont f14 icon-paixu1"></span> <span
                        class="ml5 pubfont icon-shuoming f14"></span>
                    </div>
                  </th>
                  <th>
                    <div style="width: 167px;">
                      预估付款服务费 <span class="ml5 pubfont f14 icon-paixu1"></span> <span
                        class="ml5 pubfont icon-shuoming f14"></span>
                    </div>
                  </th>
                  <th>
                    <div style="width: 124px;">
                      结算笔数 <span class="ml5 pubfont f14 icon-paixu1"></span> <span
                        class="ml5 pubfont icon-shuoming f14"></span>
                    </div>
                  </th>
                  <th>
                    <div style="width: 126px;">
                      结算金额 <span class="ml5 pubfont f14 icon-paixu1"></span> <span
                        class="ml5 pubfont icon-shuoming f14"></span>
                    </div>
                  </th>
                  <th>
                    <div style="width: 174px;">
                      预估结算服务费 <span class="ml5 pubfont f14 icon-paixu1"></span> <span
                        class="ml5 pubfont icon-shuoming f14"></span>
                    </div>
                  </th>
                  <th>
                    <div style="width: 130px;">
                      淘宝客数 <span class="ml5 pubfont f14 icon-paixu1"></span> <span
                        class="ml5 pubfont icon-shuoming f14"></span>
                    </div>
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr style="white-space:nowrap" v-for="(v,k) in goodslist" :key="k">
                  <td style="height: 100px;width: 333px;">
                    <div style="height: 100px;width: 333px;">
                      <div class="img">
                        <img
                          :src="v.pict_url"
                          alt="">
                      </div>
                      <div class="right">
                        <div class="line-2 a_title" style="white-space: initial;color: #666;" contenteditable>
                          {{ v.title }}
                        </div>
                        <div class="price">
                          <span class="yuan">￥</span>
                          <span class="integer" contenteditable>{{ ((Number(v.reserve_price))).toFixed(2) | numFormat }}</span>
                        <!--                          <span class="pointer"></span>-->
                        <!--                          <span class="decimal" contenteditable></span>-->
                        </div>
                        <div class="color-l">
                          <span>券后价：
                            <span class="yuan">￥</span>
                            <span class="integer" contenteditable :data-price="k" @input="change($event,k)">{{ ((Number(v.zk_final_price))).toFixed(2) | numFormat }}</span>
                          </span>
                          <span class="ml10">排期：<span contenteditable>0</span>天</span>
                        </div>
                      </div>
                    </div>
                  </td>
                  <td style="height: 110px;width: 106px;">
                    <div contenteditable style="height: 100px;line-height: 100px;width: 106px;">{{ v.randomnum | numFormat }}</div>
                  </td>
                  <td style="height: 110px;width: 116px;">
                    <div contenteditable style="height: 100px;line-height: 100px;width: 116px;">{{ num | numFormat }}</div>
                  </td>
                  <td style="height: 110px;width: 118px;" :id="'n'+k" :data-paynum="k">
                    <div contenteditable style="height: 100px;line-height: 100px;width: 118px;" @input="change2($event,k)">{{ num | numFormat }}</div>
                  </td>
                  <td style="height: 110px;width: 119px;">
                    <div style="height: 100px;line-height: 100px;width: 119px;"><span
                      class="yuan">￥</span>{{ (v.pay).toFixed(2) | numFormat }}
                    </div>
                  </td>
                  <td style="height: 110px;width: 121px;">
                    <div contenteditable style="height: 100px;line-height: 100px;width: 121px;">{{ rate*100 }}%</div>
                  </td>
                  <td style="height: 110px;width: 167px;">
                    <div contenteditable style="height: 100px;line-height: 100px;width: 167px;"><span
                      class="yuan">￥</span>{{ (v.forecast).toFixed(2)| numFormat }}
                    </div>
                  </td>
                  <td style="height: 110px;width: 124px;">
                    <div contenteditable style="height: 100px;line-height: 100px;width: 124px;">0</div>
                  </td>
                  <td style="height: 110px;width: 126px;">
                    <div contenteditable style="height: 100px;line-height: 100px;width: 126px;">
                      <span class="yuan">￥</span>0.00
                    </div>
                  </td>
                  <td style="height: 110px;width: 174px;">
                    <div contenteditable style="height: 100px;line-height: 100px;width: 174px;"><span
                      class="yuan">￥</span>0.00
                    </div>
                  </td>
                  <td style="height: 110px;width: 130px;">
                    <div contenteditable style="height: 100px;line-height: 100px;width: 130px;">7</div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="footer-bd wrap">
        <div id="alimama-footer">
          <div class="alimama-info">
            <div class="link">
              <a target="_black" href="https://www.alimama.com/home/about-1.htm">联系客服</a>
              <b>|</b>
              <a target="_black" href="https://open.taobao.com/">开放平台</a>
              <b>|</b>
              <a
                target="_black"
                href="https://terms.alicdn.com/legal-agreement/terms/suit_bu1_ali_mama_division/suit_bu1_ali_mama_division201709111812_13128.html">法律声明</a>
              <b>|</b>
              <a target="_black" href="https://www.alimama.com/home/about-4.htm">意见反馈</a>
              <b>|</b>
              <a target="_black" href="https://jubao.alibaba.com/">廉正举报</a>
            </div>
            <div class="copyright">
              <span>阿里妈妈版权所有 2007-现在</span>
              <b>|</b>
              <a target="_black" href="http://www.miibeian.gov.cn/">ICP证：浙B2-20070195</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import $ from 'jquery'
  import moment from 'moment'
  import BScroll from 'better-scroll'

  export default {
    name: 'Screenshot',
    data () {
      return {
        moment,
        itemId: '',
        rate: '',
        num: '',
        goodslist: [
          // {
          //   category_id: 50009866,
          //   category_name: '猪肉类',
          //   commission_rate: '5000',
          //   commission_type: 'MKT',
          //   coupon_amount: '30',
          //   coupon_end_time: '2020-11-28',
          //   coupon_id: '505b01bee52845508e01dd72910a3278',
          //   coupon_info: '满38元减30元',
          //   coupon_remain_count: 99000,
          //   coupon_start_fee: '38',
          //   coupon_start_time: '2020-11-27',
          //   coupon_total_count: 100000,
          //   include_dxjh: 'false',
          //   include_mkt: 'true',
          //   info_dxjh: '{}',
          //   item_description: '',
          //   item_id: 625320381875,
          //   item_url: 'https://detail.tmall.com/item.htm?id=625320381875',
          //   level_one_category_id: 50002766,
          //   level_one_category_name: '零食/坚果/特产',
          //   nick: '小罐松旗舰店',
          //   num_iid: 625320381875,
          //   pict_url: 'https://img.alicdn.com/bao/uploaded/i2/2208916650670/O1CN01mNT4571GotyxW7DEX_!!0-item_pic.jpg',
          //   presale_deposit: '0',
          //   presale_end_time: 0,
          //   presale_start_time: 0,
          //   presale_tail_end_time: 0,
          //   presale_tail_start_time: 0,
          //   provcity: '福建 泉州',
          //   real_post_fee: '0.00',
          //   reserve_price: '1054.72',
          //   seller_id: 2208916650670,
          //   shop_dsr: 48895,
          //   shop_title: '小罐松旗舰店',
          //   short_title: '小罐松海苔无添加宝宝辅食20g3罐',
          //   superior_brand: '0',
          //   title: '小罐松海苔儿童肉松婴儿无添加宝宝辅食添加料营养零食寿司20g3罐',
          //   tk_total_commi: '61851.23',
          //   tk_total_sales: '14794',
          //   user_type: 1,
          //   volume: 11507,
          //   white_image: 'https://img.alicdn.com/bao/uploaded/O1CN01dN5kEm1nZDkhdq35e_!!6000000005103-2-yinhe.png',
          //   zk_final_price: '70007.36',
          //   randomnum: 23000, // 引流uv
          //   forecast: 1545455,
          //   pay: 773600,
          //   small_images: {
          //     string: [
          //       'https://img.alicdn.com/i1/2208916650670/O1CN01b6dmoW1Gotz38msck_!!2208916650670.jpg',
          //       'https://img.alicdn.com/i2/2208916650670/O1CN012i0N0l1Gotyzem15U_!!2208916650670.jpg',
          //       'https://img.alicdn.com/i4/2208916650670/O1CN01vos6WM1Gotz0JF6bs_!!2208916650670.jpg',
          //       'https://img.alicdn.com/i2/2208916650670/O1CN01uuPPQF1Gotyuq2GI1_!!2208916650670.jpg'
          //     ]
          //   }
          // }
        ]
      }
    },
    computed: {},
    filters: {
      numFormat (input) {
        return input && input.toString()
          .replace(/(^|\s)\d+/g, (m) => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
      }
    },
    created () {
      this.$nextTick(() => {
        this.personScroll()
      })
    },
    mounted () {

    },
    methods: {
      change (e, k) {
        // console.log(e.target.innerText, k)
        this.goodslist[k].pay = Number(e.target.innerText) * Number(this.num)
        this.goodslist[k].forecast = this.goodslist[k].pay * this.rate
      },
      change2 (e, k) {
        console.log(e.target.innerText)
        const num = e.target.innerText.replace(/[^0-9]/ig, '')
        this.goodslist[k].pay = Number(num) * Number(this.goodslist[k].zk_final_price)
        this.goodslist[k].forecast = this.goodslist[k].pay * this.rate
        // e.target.innerText = num.toString()
        //   .replace(/(^|\s)\d+/g, (m) => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
      },
      personScroll () {
        this.$nextTick(() => {
          if (!this.scroll) {
            this.scroll = new BScroll(this.$refs.father, {
              startX: 0,
              click: true,
              scrollX: true,
              // 忽略竖直方向的滚动
              scrollY: false,
              eventPassthrough: 'vertical'
            })
          } else {
            this.scroll.refresh()
          }
        })
      },
      getRandom (start, end, fixed = 0) {
        const differ = end - start
        const random = Math.random()
        return (start + differ * random).toFixed(fixed)
      },
      getdata () {
        var _this = this
        $.get('http://zsxt.letuilm.com/api/v1/tgxt',
          {
            itemId: this.itemId,
            rate: this.rate,
            num: this.num,
            type: 1
          }, function (res) {
            // console.log(res)
            var obj = res.data
            obj.randomnum = _this.getRandom(23000, 24800)
            obj.pay = obj.zk_final_price * _this.num
            obj.forecast = obj.pay * _this.rate
            _this.goodslist.push(obj)
          }
        )
      }
    }
  }
</script>
<style lang='less' scoped>
  @font-face {
    font-family: pubfont;
    font-weight: normal;
    font-style: normal;
    src: url('../../assets/font/font_55467_qntwequuqdm.ttf') format('truetype')
  }

  .pubfont {
    font-family: "pubfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .icon-shuoming:before {
    content: "\e62a";
  }

  .icon-fuzhi1:before {
    content: "\e63d";
  }

  .icon-zhankaishouqi-copy:before {
    content: "\e60e";
  }

  .icon-paixu1:before {
    content: "\e6c0";
  }

  .screenshot {
    font-size: 12px;
    color: #333;
    line-height: 1.42857143;
    font-family: "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", Georgia, "Times New Roman", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;

    .color-l {
      color: #999;
    }

    .ml5 {
      margin-left: 5px;
    }

    .mr5 {
      margin-right: 5px;
    }

    .mt5 {
      margin-top: 5px;
    }

    .f14 {
      font-size: 14px;
    }

    .f16 {
      font-size: 16px;
    }

    .pt10 {
      padding-top: 10px;
    }

    .fr {
      float: right;
    }

    .w140 {
      width: 140px;
    }

    .mb5 {
      margin-bottom: 5px;
    }

    .f12 {
      font-size: 12px;
    }

    .ml20 {
      margin-left: 20px;
    }

    .mt10 {
      margin-top: 10px;
    }

    .ml10 {
      margin-left: 10px;
    }

    .tc {
      text-align: center;
    }

    .sp {
      font-size: 12px;
      color: #333;
      line-height: 1.42857143;
      font-family: "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", Georgia, "Times New Roman", Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    .btn {
      display: inline-block;
      padding: 0 10px;
      height: 32px;
      line-height: 30px;
      border: 1px solid transparent;
      border-radius: 4px;
      color: #999;
      font-weight: 400;
      text-align: center;
      white-space: nowrap;
      -ms-touch-action: manipulation;
      touch-action: manipulation;
      cursor: pointer;
      -ms-user-select: none;
      user-select: none;
      background-image: none;
      box-sizing: border-box;
    }

    .btn:hover {
      background: #f0f0f0;
    }

    .top {
      background: #EF503D;
      height: 30px;
      line-height: 30px;
      position: relative;
      color: #fff;

      .topmain {
        width: 900px;
        margin: 0 auto;
        text-align: center;
      }

      .top_right1 {
        position: absolute;
        top: 0;
        right: 40px;
      }

      .top_right2 {
        position: absolute;
        top: 0;
        right: 0px;
      }
    }

    .header {
      padding: 16px 0;
      text-align: center;
      background-color: #fff;
    }

    .main {
      padding-bottom: 0;
      background: #e8ebf2;
      border-radius: 4px;
      overflow: hidden;
      color: #999;

      .card {
        background-color: #fff;
        min-height: 460px;
        margin: 14px;
        padding: 50px 24px 24px;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        border-radius: 4px;

        .title {
          display: flex;
          align-items: center;
          line-height: 32px;

          .t1 {
            cursor: pointer;
          }

          .t1:hover {
            color: #f50;
          }

          .t3 {
            display: block;
            text-overflow: ellipsis;
            overflow: hidden;
            min-width: 56px;
            text-align: left;
            height: 32px;
            line-height: 30px;
            border: 1px solid transparent;
            border-radius: 4px;
            color: #999;
            background-color: transparent;
            position: relative;
            padding: 0 10px;

            -webkit-user-modify: read-write;
            overflow-wrap: break-word;
            -webkit-line-break: after-white-space;
          }

          .t3:hover {
            border: 1px solid #E6E6E6;
          }
        }

        .infobox {
          .info_top {
            .h3 {
              margin-bottom: 10px;
              margin-top: 10px;
              font-size: 22px;
              font-weight: normal;

              .tgz {
                font-size: 12px;
                margin-right: 10px;
                color: green;
              }

              .title_text {
                display: inline-block;
                vertical-align: middle;
                max-width: 500px;
                border-right: 1px solid #e2e2e9;
                padding-right: 16px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                //可编辑
                -webkit-user-modify: read-write;
                overflow-wrap: break-word;
                -webkit-line-break: after-white-space;
              }

              .goodsinfo {
                margin-left: 16px;
                font-size: 12px;

                .num {
                  color: #fe4800;
                }
              }

              .copyright {
                color: #ff4800;
                font-size: 12px;
                margin-top: 10px;
                float: right;
                cursor: pointer;
              }
            }
          }

          .timebox {
            display: flex;
            justify-content: space-between;

            .time {
              /*float: left;*/
              padding-bottom: 10px;
              padding-top: 10px;

              .active {
                display: inline-block;
                padding-right: 15px;
                margin-right: 15px;
                border-right: 1px solid #e2e2e9;
              }

              .endtime {
                display: inline-block;
                padding-right: 15px;
                margin-right: 15px;
              }
            }

            .export {
              .btn-small {
                height: 24px;
                line-height: 22px;
                font-size: 12px;
              }

              .exleft {
                width: 120px;
                margin-bottom: 5px;
                position: relative;
                height: 40px;
                line-height: 38px;
                font-size: 14px;
                color: #fff;
                background-color: #ff4800;
                border-radius: 0;

                .detail {
                  padding: 10px;
                  position: absolute;
                  right: 0;
                  top: 100%;
                  z-index: 10;
                  background: #fff;
                  color: #333;
                  display: none;
                  box-shadow: 0 2px 6px 0 rgba(32, 32, 64, 0.16);
                }

              }

              .exleft:hover .detail {
                display: block;
              }

              .exleft:after {
                position: absolute;
                right: 10px;
                font-family: pubfont;
                content: '\e60e';
              }

              .exright {
                width: 120px;
                height: 40px;
                line-height: 38px;
                font-size: 14px;
                color: #333;
                background: rgba(32, 32, 64, .08);
                border-radius: 0;
              }

              .exright:hover {
                color: #F50;
                background: rgba(32, 32, 64, .16);
              }
            }
          }

          .summary {
            margin-top: 20px;
            display: block;

            dl, dd {
              margin: 0;
              padding: 0;
            }

            .h5 {
            }

            .s_detail {
              padding: 20px 0;

              .number {
                font-family: tahoma;
                color: #333333;

                .integer {
                  font-weight: 700;
                  font-size: 18px;
                }

                .pointer {
                  font-weight: 700;
                }

                .decimal {
                  font-size: 12px;
                  font-weight: 700;
                }

                .yuan {
                  font-size: 12px;
                }
              }
            }

            .s_detail dl {
              display: inline-block;
              width: 20%;
              margin-top: 10px;
            }

            .s_detail dl dt {
              color: #999;
              margin: 10px 0;
            }

            .s_detail dl dd {
              margin-left: 0;
              padding-left: 0;
            }
          }

          .navs {
            position: relative;
            border-bottom: 1px solid #ccc;

            ul {
              margin: 0;
              padding: 0;
              list-style-type: none;
              list-style-image: none;
              display: flex;
              justify-content: flex-start;
              align-items: center;
            }

            .f18 {
              font-size: 18px;
            }

            .nav {
              color: #666;
              width: 140px;
              line-height: 50px;
              height: 50px;
              list-style: none;
              cursor: pointer;

              a {
                display: block;
                font-size: 16px;
                width: 100%;
                height: 100%;
                color: #666;
                outline: 0;
                text-decoration: none;
              }

            }
          }

          .selected {
            a {
              color: #ff4800 !important;
              border-bottom: 1px solid #ff4800;
            }
          }

          .nav:hover a {
            color: #ff4800 !important;
          }

          .tablebox {
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
            color: #333333;
            th {
              font-weight: inherit;
              text-align: left;
              white-space: nowrap;
              padding: 0 5px;
              background: #fafafa;
              border: none;
              line-height: 60px;
            }

            tr {
              display: inline-block;
            }

            td {
              border: none;
              padding: 5px;
            }

            tbody {
              tr {
                border-bottom: 1px solid #e6e6e6;
              }
            }

            .img {
              img {
                float: left;
                width: 100px;
                height: 100px;
              }
            }

            .right {
              margin-left: 115px;
              max-width: 295px;
              height: 100px;

              .line-2 {
                width: 200px;
                height: 44px;
                line-height: 20px;
                overflow: hidden;
                padding-bottom: 2px;
                padding: 2px 4px;
              }

              .a_title:hover {
                color: #f50;
              }

              .price {
                height: 32px;
                overflow: hidden;
                padding: 2px 4px;
                font-family: tahoma;

                .yuan {
                  font-size: 12px;
                  color: #333333;
                }

                .integer {
                  font-weight: 700;
                  font-size: 16px;
                  color: #333333;
                }
              }

              .color-l {
                min-height: 28px;
                overflow: hidden;
                padding: 2px 4px;
              }
            }
          }
        }
      }
    }

    .footer {
      background: #e8ebf2;

      #alimama-footer {
        padding: 30px 10px;
        text-align: left;
        font-size: 12px;
        line-height: 2.4;
        font-family: 'helvetica neue', tahoma, 'hiragino sans gb', stheiti, 'wenquanyi micro hei', \\5FAE\\8F6F\\96C5\\9ED1, \\5B8B\\4F53, sans-serif;
      }

      #alimama-footer a,
      #alimama-footer span {
        color: #333;
        filter: alpha(opacity=50);
        filter: none \9;
        opacity: 0.5;
      }

      #alimama-footer a:hover {
        filter: alpha(opacity=100);
        filter: none \9;
        opacity: 1;
      }

      #alimama-footer .alimama-info .link,
      #alimama-footer .alimama-info .copyright {
        display: inline-block;
      }

      #alimama-footer .alimama-info a,
      #alimama-footer .alimama-info span {
        margin-right: 20px;
      }

      #alimama-footer .alimama-info b {
        display: none;
        font-weight: 400;
        color: #DDD;
      }

      #alimama-footer {
        text-align: center;
      }
    }
  }
</style>
